/**
 * NavigationBar
 */
import React, { Component } from 'react';

import {
  StyleSheet,
  Platform,
  DeviceInfo,
  Image,
  StatusBar,
  Text,
  View,
  ViewPropTypes,
} from 'react-native'
import PropTypes from 'prop-types';

const NAV_BAR_HEIGHT_ANDROID = 50
const NAV_BAR_HEIGHT_IOS = 44
const STATUS_BAR_HEIGHT = DeviceInfo.isIPhoneX_deprecated?0:20
const StatusBarShapek = {
  backgroundColor: PropTypes.string,
  barStyle: PropTypes.oneOf(['default', 'light-content', 'dark-content']),
  hidden: PropTypes.bool
}


export default class NavigationBar extends Component {
  static propTypes = {
    style: ViewPropTypes.style,
    title: PropTypes.string,
    titleView: PropTypes.element,
    hide: PropTypes.bool,
    leftButton: PropTypes.element,
    rightButton: PropTypes.element,
    statusBar: PropTypes.shape(StatusBarShapek)
  }

  static defaultProps = {
    statusBar: {
      backgroundColor: '#64B5F6',
      barStyle: 'light-content',
      hidden: false,
    },
  }

  constructor(props) {
    super(props)
    this.state = {
      title: '',
      hide: false
    }
  }

  render() {
    // statusBar ios 自定义的 状态栏 样式属性
    const { statusBar, titleView, title, leftButton, rightButton } = this.props
    let status = <View style={styles.statusBar}>
      <StatusBar {...statusBar} />
    </View>
    let middle = titleView ? titleView : <
      Text style={styles.title}>{title}</Text>
    let content = <View style={styles.navBar}>
      {leftButton}
      <View style={styles.middleContainer}>
        {middle}
      </View>
      {rightButton}
    </View>
    return (
      <View style={styles.container}>
        {status}
        {content}
      </View>
    )
  }

}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#64B5F6'
  },
  navBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
  },
  middleContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    left: 40,
    right: 40
  },
  title: {
    fontSize: 20,
    color: '#fff'
  },
  statusBar: {
    height: Platform.OS === 'ios' ? STATUS_BAR_HEIGHT : 0,
  }
})
